<template>
    <div>
        <div style="display: flex; align-items: center; padding: 10px; color: #fff">
            <span style="margin-right: 20px; font-weight: bold">气象服务产品</span>
            <span style="margin-right: 20px">|</span>
            <span style="display: flex; align-items: center">
                <span>72小时天气预报</span>
            </span>
        </div>
        <!-- 表格 -->
        <div>
            <el-table class="product" :data="groupData" stripe style="width: 100%" :header-cell-style="headerCellStyle"
                :cell-style="cellStyle" :row-style="rowStyle">
                <el-table-column prop="instalMent" label="发布单位" fixed="left" min-width="25%"></el-table-column>
                <el-table-column prop="productName" label="产品名称" min-width="25%"></el-table-column>
                <el-table-column prop="unit" label="产品期数" min-width="25%">
                </el-table-column>
                <el-table-column prop="time" label="产品发布时间" min-width="25%">
                </el-table-column>
                <el-table-column prop="filename" label="文件名" min-width="25%">
                </el-table-column>
                <el-table-column prop="operate" label="文件操作" min-width="30%">
                    <template v-slot="scope">
                        <el-button @click="getUrl(scope.row.filename)" type="info" size="small"
                            style="margin-left: 10px">查看</el-button>
                        <el-button type="primary" size="small" @click="download(scope.row.filename)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Request from "@/utils/request";
export default {
    data() {
        return {
            groupData: [],
            newNum: "",
            instalMentMap: {
                BFYM: "  雅安  ",
                BXMA: "  名山  ",
                BXTQ: "  天全  ",
                BXLS: "  庐山  ",
                BXBX: "  宝兴  ",
                BXRJ: "  荥经  ",
                BXHM: "  汉源  ",
                BXSM: "  石棉  ",
                BFDN: " 达州市 ",
                BXQX: "  渠县  ",
                BXDZ: "  大竹  ",
                BXKJ: "  开江  ",
                BXDX: "  达县  ",
                BXXH: "  宣汉  ",
                BXWY: "  万源  ",
            },
        };
    },
    methods: {
        headerCellStyle() {
            return {
                background: "#0c2340",
                color: "#fff",
            };
        },
        cellStyle() {
            return {
                background: "#05152e",
                color: "#fff",
            };
        },
        rowStyle() {
            return {
                height: "30px",
            };
        },

        getCountyCode(countyName) {
            for (const [code, name] of Object.entries(this.instalMentMap)) {
                if (name.trim() === countyName.trim()) {
                    return code;
                }
            }
            return null;
        },

        getPdf() {
            const county = localStorage.getItem("county");
            let theName = county === "雅安" ? "" : this.getCountyCode(county);
            Request.get("/pdf/getPdf", {
                params: {
                    classification: '',
                    countSign: "",
                    beginTime: '2024-09-01',
                    endTime: '2024-10-01'
                },
            }).then((result) => {
                //console.log(result);
                const res = result.data;
                // 遍历数据，根据classification分组
                this.groupData = res.data
                    // .filter((item) => item.classification === parseInt(this.newNum))
                    .map((item) => ({
                        instalMent: this.instalMentMap[item.countySign] || item.countySign,
                        productName: this.current,
                        unit: item.id,
                        time: item.date,
                        filename: item.fileName,
                    }));
                console.log(res.data)
                console.log(this.groupData);

            });
        },
    },
    mounted() {
        this.getPdf();
    },
};
</script>

<style scoped></style>